<script setup lang="ts">
import { ref, defineProps } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import subjectDec from './component/subject-dec.vue'
import subjectMainClass from './component/subject-mainClass.vue'
import subjectPostGraduateDirect from './component/subject-postGraduateDirect.vue'
import subjectEmploy from './component/subject-employDirect.vue'
import applyColleges from './component/applyColleges.vue'

onLoad(() => {})

const { title, subClass, tag } = defineProps({
  title: {
    type: String,
    default: () => {
      return '新闻学'
    },
  },
  subClass: {
    type: String,
    default: () => {
      return '本科'
    },
  },
  tag: {
    type: String,
    default: () => {
      return '文学 新闻传播'
    },
  },
})

const infoList = ref<Array<object>>([
  { title: '专业年限', value: '四年' },
  {
    title: '授予学位',
    value: '学士学位',
  },
  { title: '男女比例', value: '66：34' },
  { title: '文理比例', value: '85：15' },
])

// 切换布局列表
const itemsList = ref<Array<object>>([
  { id: 0, name: '专业简介' },
  { id: 1, name: '主要课程' },
  { id: 2, name: '考研方向' },
  { id: 3, name: '就业方向' },
  { id: 4, name: '可报院校' },
])

const pageId = ref<number>(0)
const changePage = (e) => {
  console.log(e)
  pageId.value = e
}
</script>

<template>
  <gui-page
    ref="guipage"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :loadmore="false"
    :refresh="false"
    style="background-color: white"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <gui-header-leading :back="true" :home="false" />
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">首页</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width: 120rpx" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>
    <template #gFixedTop>
      <!-- 分类导航 -->
      <!--      <view id="myheader" class="gui-dark-bg-level-3 gui-bg-white">-->
      <!--        <view class="wh100p bcolorfff" style="padding: 0 30rpx; box-sizing: border-box">-->
      <!--          <view class="subject-head">-->
      <!--            <view class="flex">-->
      <!--              <text class="subject-title">{{ title }}</text>-->
      <!--            </view>-->
      <!--          </view>-->
      <!--          <view class="flex subject-tag" style="color: #537bb6; font-weight: 600">-->
      <!--            <text class="subject-class">{{ subClass }}</text>-->
      <!--            |-->
      <!--            <text class="subject-class-first">{{ tag }}</text>-->
      <!--          </view>-->
      <!--          <view class="subject-info-box w100p flex-between gap18">-->
      <!--            <view v-for="(item, index) of infoList" :key="index" class="subject-info-item flex gap8 column-center">-->
      <!--              <view class="h100p flex-center column-center" style="width: 40%">-->
      <!--                <img style="border: #90a4ae 1rpx solid; width: 100rpx; height: 100rpx; border-radius: 50%" />-->
      <!--              </view>-->
      <!--              <view class="flex-column h100p gap8" style="justify-content: space-between; font-size: 26rpx">-->
      <!--                <text>{{ item.value }}</text>-->
      <!--                <text>{{ item.title }}</text>-->
      <!--              </view>-->
      <!--            </view>-->
      <!--          </view>-->
      <!--        </view>-->
      <!--        <switch-navigation class="w100p flex" :items="itemsList" :size="0" style="margin-top: 20rpx"-->
      <!--                           @change="changePage" />-->
      <!--      </view>-->
    </template>
    <template #gBody>
      <view class="wh100p flex-column" style="flex: 1">
        <view id="myheader" class="gui-dark-bg-level-3 gui-bg-white">
          <view class="wh100p bcolorfff" style="padding: 0 30rpx; box-sizing: border-box">
            <view class="subject-head">
              <view class="flex">
                <text class="subject-title">{{ title }}</text>
              </view>
            </view>
            <view class="flex subject-tag" style="color: #537bb6; font-weight: 600">
              <text class="subject-class">{{ subClass }}</text>
              |
              <text class="subject-class-first">{{ tag }}</text>
            </view>
            <view class="subject-info-box w100p flex-between gap18">
              <view v-for="(item, index) of infoList" :key="index" class="subject-info-item flex gap8 column-center">
                <view class="h100p flex-center column-center" style="width: 40%">
                  <img style="border: #90a4ae 1rpx solid; width: 100rpx; height: 100rpx; border-radius: 50%" />
                </view>
                <view class="flex-column h100p gap8" style="justify-content: space-between; font-size: 26rpx">
                  <text>{{ item.value }}</text>
                  <text>{{ item.title }}</text>
                </view>
              </view>
            </view>
          </view>
          <switch-navigation class="w100p flex" :items="itemsList" :size="0" style="margin-top: 20rpx" @change="changePage" />
        </view>
        <view class="wh100p flex-column gui-flex1 gui-relative" style="">
          <scroll-view class="gui-absolute-full" :scroll-y="true" style="">
            <subject-dec v-show="pageId == 0" />
            <subject-main-class v-show="pageId == 1" />
            <subject-post-graduate-direct v-show="pageId == 2" />
            <subject-employ v-show="pageId == 3" />
            <apply-colleges v-show="pageId == 4" />
          </scroll-view>
        </view>
      </view>
    </template>
  </gui-page>
</template>

<style scoped>
.subject-head {
  width: 100%;
  height: 60rpx;

  box-sizing: border-box;
  font-size: 32rpx;
  color: #537bb6;
  font-weight: 600;
}

.college-logo-box {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
}

.college-logo-box image {
  width: 120rpx;
  height: 120rpx;
  background-color: aliceblue;
  border-radius: 50%;
}

.subject-tag {
  margin-top: 20rpx;
}

.subject-class {
  margin-right: 10rpx;
}

.subject-class-first {
  margin-left: 10rpx;
}

.subject-info-box {
  margin-top: 40rpx;
  padding: 10rpx 30rpx;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.subject-info-item {
  width: 40%;
}

.info-box {
  padding: 10rpx 20rpx;
  box-sizing: border-box;
}
</style>
